<template>
    <div class="searchPage-box" ref="searchPageBox">
        <div>
            <!-- 物品分类管理展示 -->
            <div class="searchPage-nav">
                <div :class="{'active-color':sort=='pop'}" @click="sendSort('pop')">综合</div>
                <div :class="{'active-color':sort=='sell'}" @click="sendSort('sell')">销量</div>
                <div :class="{'active-color':sort=='new'}" @click="sendSort('new')">新品</div>
            </div>
            <!-- 物品展示 -->
            <SearchPageGood class="searchPage-goods" :types="searchPage.goodTypes"></SearchPageGood>
        </div>
    </div>
</template>
<script>
import SearchPageGood from "../components/searchPageGood";

import BScroll from "better-scroll";

import { mapState, mapActions } from "vuex";
export default {
    components: {
        SearchPageGood
    },
    data() {
        return {
            fcid: "",
            sort: "pop"
        };
    },
    computed: {
        ...mapState(["searchPage"])
    },
    methods: {
        initScroll() {
            var scroll = new BScroll(this.$refs.searchPageBox, {
                click: true
            });
        },
        ...mapActions(["loadGoodsByTitle", "loadGoodsByWord"]),
        initLoadGoods() {
            if (/\?fcid=/g.test(this.$route.query.fcid)) {//若link中有带fcid参数
                if (this.$route.query.fcid.search(/\?fcid=/) != -1) {
                    let si = this.$route.query.fcid.search(/\?fcid/) + 6;
                    let li = this.$route.query.fcid.search(/&/);
                    this.fcid = this.$route.query.fcid.slice(si, li);
                }
                this.loadGoodsByTitle({
                    title: this.$route.query.title,
                    fcid: this.fcid,
                    // sort: this.sort
                    sort: "pop"
                });
                this.sort = "pop";
            } else if(this.$route.query.title){//没带fcid参数但是有title参数的
                this.loadGoodsByWord({
                    q: this.$route.query.title,
                    sort: "pop"
                });
            }else{//既没fcid也没title参数的,这里是搜索栏搜索来查询的情况
                this.loadGoodsByWord({
                    q:this.$route.query.word,
                    sort:"pop"
                })
            }
        },
        sendSort(arg) {
            this.sort = arg;
            if (this.$route.query.title) {
                this.loadGoodsByTitle({
                    //通过title或fcid来查询
                    //点击综合、销量、新品完成的查询请求
                    title: this.$route.query.title,
                    fcid: this.fcid,
                    sort: this.sort
                });
            }
            if (this.$route.query.word) {
                this.loadGoodsByWord({
                    //通过word关键字来查询
                    q: this.$route.query.word,
                    sort: this.sort
                });
            }
        }
    },
    watch: {
        $route: {
            handler(nv, ov) {
                // console.log(nv.query,ov.query);
                console.log(nv, ov);
                if (!nv.query.title) {
                    //若不带title或fcid来请求则就是以关键字来请求的
                    this.loadGoodsByWord({
                        q: nv.query.word,
                        // sort:this.sort
                        sort: "pop"
                    });
                }
                this.sort = "pop";
            },
            immediate: true
        }
    },
    mounted() {
        this.initScroll();
        console.log(this.$route.query.title);
        console.log(this.$route.query.fcid);
        // console.log(this.$route.query.fcid.search(/\?fcid=/));
        // console.log(this.$route.query.fcid.search(/&/));
        console.log(/\?fcid=/g.test(this.$route.query.fcid));
        this.initLoadGoods();
    }
    // beforeRouterEnter(){
    //     this.loadGoodsByWord({
    //         q:this.$route.query.word,
    //         sort:"pop"
    //     });
    //     next("/searchGood");
    // }
};
</script>
<style lang="less" scoped>
//搜索页面的样式
.searchPage-box {
    position: absolute;
    top: 1rem;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
    // overflow-y: auto;
}
//物品分类的样式
.searchPage-nav {
    width: 100%;
    height: 1rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    align-items: center;
    > div {
        width: 100%;
        text-align: center;
        font-size: 0.35rem;
        font-weight: bold;
        border-right: 1px solid @gray-light;
    }
    // > div:first-child {
    //     color: @pink;
    // }
    > div:last-child {
        border: none;
    }
}
//物品页样式
.searchPage-goods {
    width: 100%;
    box-sizing: border-box;
    padding: 0.2rem;
    display: flex;
    flex-flow: row wrap;
}
.active-color {
    color: @pink;
}
</style>